<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新建通知</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />


</head>
<body>

<div id="app">

  <div class="addBrand-container" id="food-add-app">
    <div class="container">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="公告标题" prop="title">
          <el-input v-model="ruleForm.title"
                    placeholder="请填写公告标题">
          </el-input>
        </el-form-item>

        <el-form-item label="公告内容" prop="content">
          <el-input type="textarea"
                    v-model="ruleForm.content"
                    placeholder="请填写公告内容,最长200字"
                    maxlength="200">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即发布</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>

</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<!-- 引入前端响应拦截器 -->
<script src="../../js/request.js"></script>

<script src="../../js/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        ruleForm: {
          id: '',
          title: '',
          content: ''
      },
        rules: {
          title: [
            { required: true, message: '请输入公告标题', trigger: 'blur' },
            { min: 1, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请填写公告内容', trigger: 'blur' }
          ]
        }
      };
    },

    created() {
       let id = requestUrlParam('id');
       axios({
           url: "http://localhost:8080/notice/one",
           method: 'get',
           params: { id }
       }).then(resp => {
           if (resp.data.result === true) {
               this.ruleForm.id = resp.data.data.id
               this.ruleForm.title = resp.data.data.title
               this.ruleForm.content = resp.data.data.content
           }
       })
    },

    methods: {
        //发布公告
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    axios({
                        url: "http://localhost:8080/notice/add",
                        method: 'put',
                        data: this.ruleForm
                    }).then(resp => {
                        if (resp.data.result === true) {
                            this.$message({
                                type: 'success',
                                message: '发布成功!'
                            });
                            this.resetForm('ruleForm')
                        } else {
                            this.$message({
                                type: 'error',
                                message: '发布失败,请稍后再试!'
                            });
                        }
                    })
                    console.log(this.ruleForm)
                } else {
                    return false;
                }
            });
        },

        //重置公告
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        //返回
        goBack() {
            window.parent.menuHandle({
                id: '2',
                url: 'page/notice/notice.html'
            }, false)
        }
    }
  });
</script>

</body>
</html>